<script setup></script>

<template>
  <div class="w-full h-64px relative overflow-hidden px-22px mt-20px">
    <img class="absolute left-0 h-64px w-22px border-none z-10" src="/public/images/home/acide.png" />
    <img class="absolute right-0 h-64px w-22px border-none z-10 transform rotate-180" src="/public/images/home/acide.png" />
    <ul class="links">
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="宝武" src="/public/images/links/baowu.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="紫燕子公寓" src="/public/images/links/ziyanzi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="视源股份" src="/public/images/links/shiyuan.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="创业公社" src="/public/images/links/chuangyegongshe.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="联投置业" src="/public/images/links/liantou.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="棉花公寓" src="/public/images/links/mianhua.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="青年公寓" src="/public/images/links/qingnian.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="金地集团" src="/public/images/links/jindi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="中粮置地广场" src="/public/images/links/zhongliang.png" /></NuxtLink>
      </li>

      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="宝武" src="/public/images/links/baowu.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="紫燕子公寓" src="/public/images/links/ziyanzi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="视源股份" src="/public/images/links/shiyuan.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="创业公社" src="/public/images/links/chuangyegongshe.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="联投置业" src="/public/images/links/liantou.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="棉花公寓" src="/public/images/links/mianhua.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="青年公寓" src="/public/images/links/qingnian.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="金地集团" src="/public/images/links/jindi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="中粮置地广场" src="/public/images/links/zhongliang.png" /></NuxtLink>
      </li>

      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="宝武" src="/public/images/links/baowu.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="紫燕子公寓" src="/public/images/links/ziyanzi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="视源股份" src="/public/images/links/shiyuan.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="创业公社" src="/public/images/links/chuangyegongshe.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="联投置业" src="/public/images/links/liantou.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="棉花公寓" src="/public/images/links/mianhua.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="青年公寓" src="/public/images/links/qingnian.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="金地集团" src="/public/images/links/jindi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="中粮置地广场" src="/public/images/links/zhongliang.png" /></NuxtLink>
      </li>

      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="宝武" src="/public/images/links/baowu.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="紫燕子公寓" src="/public/images/links/ziyanzi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="视源股份" src="/public/images/links/shiyuan.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="创业公社" src="/public/images/links/chuangyegongshe.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="联投置业" src="/public/images/links/liantou.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="棉花公寓" src="/public/images/links/mianhua.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="青年公寓" src="/public/images/links/qingnian.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="金地集团" src="/public/images/links/jindi.png" /></NuxtLink>
      </li>
      <li class="w-153px h-64px mr-22px">
        <NuxtLink><img class="h-full w-full" alt="中粮置地广场" src="/public/images/links/zhongliang.png" /></NuxtLink>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.links {
  animation-name: links-frames;
  animation-duration: 100s;
  animation-play-state: running;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  @apply w-6322px flex justify-start overflow-hidden px-11px hover:(animate-paused);
}

@keyframes links-frames {
  0% {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translateX(-50%);
  }
}
</style>
